<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab标签切换</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    #nav ul {
        display: flex;
        margin: 2px 5px;
    }
    
    #nav li {
        list-style: none;
        width: 100px;
        height: 60px;
        background-color: bisque;
        line-height: 60px;
        text-align: center;
        margin-left: 2px;
    }
    
    #nav li:hover {
        cursor: pointer;
        background-color: burlywood;
    }
    
    .con {
        width: 400px;
        height: 250px;
        background-color: goldenrod;
        border: 1px solid #000;
        padding: 20px;
    }
</style>

<body>

    <div id="nav">
        <ul>
            <li title="div1">Menu1</li>
            <li title="div2">Menu2</li>
            <li title="div3">Menu3</li>
        </ul>
    </div>
    <div id="content">
        <div class="con" id="div1" style=" display: block; ">
            <h2>Menu1</h2>
            <p>
                remote.origin.url=https://gitee.com/zyt325/learn_frontend.git remote.origin.fetch=+refs/heads/*:refs/remotes/origin/
            </p>
        </div>
        <div class="con" id="div2">
            <h2>Menu2</h2>
            <p>
                remote.origin.url=https://gitee.com/zyt325/learn_frontend.git remote.origin.fetch=+refs/heads/*:refs/remotes/origin/
            </p>
        </div>
        <div class="con" id="div3">
            <h2>Menu3</h2>
            <p>
                remote.origin.url=https://gitee.com/zyt325/learn_frontend.git remote.origin.fetch=+refs/heads/*:refs/remotes/origin/
            </p>
        </div>
    </div>
    <script>
        window.onload =
            function() {
                var menus = document.querySelectorAll('#nav li');
                var tabs = document.querySelectorAll('.con');
                for (var m = 0; m < tabs.length; m++) {
                    if (tabs[m].style.display) {
                        menus[m].style.backgroundColor = 'red'
                    } else {
                        tabs[m].style.display = 'none'
                    }
                }

                function clear_btn_color() {
                    for (var m = 0; m < menus.length; m++) {
                        menus[m].style.backgroundColor = 'bisque'
                    }
                }


                for (var m = 0; m < menus.length; m++) {
                    menus[m].onclick = function() {
                        for (var i = 0; i < tabs.length; i++) {
                            tabs[i].style.display = 'none';
                        }
                        clear_btn_color();
                        this.style.backgroundColor = 'red'
                        document.getElementById(this.title).style.display = 'block';
                    }

                }
            }
    </script>
</body>


</html>